<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 | {{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/cloudflare.font-awesome_6.4.0.all.min.css') }}">
    <script src="{{ url_for('static', filename='js/tailwindcss.3.4.16.js') }}"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3176FF',
                        secondary: '#E6F3FF'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '4px',
                        DEFAULT: '8px',
                        'md': '12px',
                        'lg': '16px',
                        'xl': '20px',
                        '2xl': '24px',
                        '3xl': '32px',
                        'full': '9999px',
                        'button': '8px'
                    }
                }
            }
        }
    </script>
    <script src="{{ url_for('static', filename='js/echarts.5.5.0.echarts.min.js') }}"></script>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/viewer.min.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <style>
        body {
            min-height: 1024px;
        }

        .menu-item:hover {
            background-color: #F5F9FF;
        }

        .menu-item.active {
            color: #3176FF;
        }

        .sub-menu {
            display: none;
        }

        .sub-menu.show {
            display: block;
        }
    </style>
    {% block cus_head %}
    {% endblock %}
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
    <!-- 左侧菜单 -->
    <div class="w-[240px] bg-white border-r border-gray-200 flex flex-col">
        <!-- Logo -->
        <div class="h-[64px] flex items-center px-6 border-b border-gray-100">
            <img class="w-[30px]" src="{{ url_for('static', filename='img/movie.png') }}" alt=""
                 style="margin-right:10px">
            <span class="text-xl font-bold text-gray-800"><a href="{{ url_for('admin.index') }}">管理系统</a></span>
        </div>

        <!-- 菜单列表 -->
        <div class="flex-1 overflow-y-auto py-4">
            <a href="{{ url_for('admin.index') }}" class="block">
                <div class="menu-item {% if request.endpoint == 'admin.index' %}active{% endif %} px-6 py-3 flex items-center cursor-pointer">
                    <i class="fas fa-home text-lg w-[20px]"></i>
                    <span class="ml-3">仪表盘</span>
                </div>
            </a>

            <a href="{{ url_for('admin.browsing_history') }}" class="block">
                <div class="menu-item {% if request.endpoint == 'admin.browsing_history' %}active{% endif %} px-6 py-3 flex items-center cursor-pointer">
                    <i class="fas fa-history text-lg w-[20px]"></i>
                    <span class="ml-3">浏览记录</span>
                </div>
            </a>

            <a href="{{ url_for('admin.recommend_result') }}" class="block">
                <div class="menu-item {% if request.endpoint == 'admin.recommend_result' %}active{% endif %} px-6 py-3 flex items-center cursor-pointer">
                    <i class="fas fa-thumbs-up text-lg w-[20px]"></i>
                    <span class="ml-3">推荐记录</span>
                </div>
            </a>

            <a href="{{ url_for('admin.score_record') }}" class="block">
                <div class="menu-item {% if request.endpoint == 'admin.score_record' %}active{% endif %} px-6 py-3 flex items-center cursor-pointer">
                    <i class="fas fa-star text-lg w-[20px]"></i>
                    <span class="ml-3">打分记录</span>
                </div>
            </a>

            <div class="menu-group">
                <div class="menu-item {% if request.endpoint == 'admin.manage_users' %}active{% endif %} px-6 py-3 flex items-center justify-between cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-cog text-lg w-[20px]"></i>
                        <span class="ml-3">系统管理</span>
                    </div>
                    <i class="fas fa-chevron-down text-sm"
                       style="transform: {% if request.endpoint == 'admin.manage_users' %}rotate(180deg){% else %}rotate(0){% endif %}"></i>
                </div>
                <div class="sub-menu pl-12 {% if request.endpoint == 'admin.manage_users' or request.endpoint == 'admin.manage_movies' or request.endpoint == 'admin.movie_detail' or request.endpoint == 'admin.manage_tags' %}show{% endif %}">
                    <a href="{{ url_for('admin.manage_movies') }}" class="block">
                        <div class="menu-item {% if request.endpoint == 'admin.manage_movies' or request.endpoint == 'admin.movie_detail' %}active{% endif %} py-2 cursor-pointer">
                            <i class="fas fa-film text-lg w-[15px]"></i>
                            <span class="ml-3">电影管理</span>
                        </div>
                    </a>
                    <a href="{{ url_for('admin.manage_tags') }}" class="block">
                        <div class="menu-item {% if request.endpoint == 'admin.manage_tags' %}active{% endif %} py-2 cursor-pointer">
                            <i class="fas fa-tags text-lg w-[15px]"></i>
                            <span class="ml-3">标签管理</span>
                        </div>
                    </a>
                    <a href="{{ url_for('admin.manage_users') }}" class="block">
                        <div class="menu-item {% if request.endpoint == 'admin.manage_users' %}active{% endif %} py-2 cursor-pointer">
                            <i class="fas fa-users text-lg w-[15px]"></i>
                            <span class="ml-3">用户管理</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧内容区 -->
    <div class="flex-1 flex flex-col">
        <!-- 顶部导航 -->
        <div class="h-[64px] bg-white border-b border-gray-200 flex items-center justify-between px-6">
            <div class="flex items-center text-gray-600 ">
                <span>首页</span>
                <i class="fas fa-chevron-right mx-2 text-xs"></i>
                <span>{{ title }}</span>
            </div>

            <div class="flex items-center">
                <div>
                    <a href="{{ url_for('user.index') }}" class="nav-item text-gray-600 hover:text-primary"
                       style="margin-right: 20px;">
                        <button class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-button">用户端
                        </button>
                    </a>
                </div>
                <button class="mr-1 text-gray-600 hover:text-gray-800">
                    <i class="fas fa-regular fa-circle-user"></i>
                </button>
                <div class="flex items-center cursor-pointer">
                    <span class=" text-gray-700">{{ current_user.username }}</span>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 p-6 bg-gray-50">
            <div class="bg-white rounded-lg p-6">
                <!-- Flash Messages -->
                <div id="alertContainer">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                {% if category == 'success' %}
                                    <div class="alert-item fixed top-20 left-1/2 transform -translate-x-1/2 w-96 bg-green-50 border border-green-200 rounded-lg shadow-lg z-50 p-4">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                                <p class="text-green-700">{{ message }}</p>
                                            </div>
                                            <button onclick="this.parentElement.parentElement.remove()"
                                                    class="text-green-500 hover:text-green-700">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="alert-item fixed top-20 left-1/2 transform -translate-x-1/2 w-96 bg-amber-50 border border-amber-200 rounded-lg shadow-lg z-50 p-4">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center gap-3">
                                                <i class="fas fa-exclamation-triangle text-amber-500"></i>
                                                <p class="text-amber-700">{{ message }}</p>
                                            </div>
                                            <button onclick="this.parentElement.parentElement.remove()"
                                                    class="text-amber-500 hover:text-amber-700">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                </div>
                {% block content %}
                {% endblock %}
            </div>
            <!-- 确认弹窗 -->
            <div id="confirmModal"
                 class="hidden fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
                <div class="bg-white rounded-lg shadow-lg w-80 p-6">
                    <div class="flex items-center justify-center gap-3 mb-6">
                        <i class="fas fa-question-circle text-amber-500 text-2xl"></i>
                        <p id="confirmMessage" class="text-gray-700"></p>
                    </div>
                    <div class="flex justify-center space-x-4">
                        <button onclick="handleConfirm(false)"
                                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-button">
                            取消
                        </button>
                        <button onclick="handleConfirm(true)"
                                class="px-4 py-2 text-white bg-primary hover:bg-primary/90 rounded-button">
                            确认
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% block scripts %}
    <script>
        document.querySelectorAll('.menu-group').forEach(group => {
            const header = group.querySelector('.menu-item');
            const subMenu = group.querySelector('.sub-menu');
            const arrow = header.querySelector('.fa-chevron-down');

            header.addEventListener('click', () => {
                subMenu.classList.toggle('show');
                arrow.style.transform = subMenu.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
            });
        });

        /**
         * 确认弹窗
         */
        let confirmResolve = null;

        function showConfirm(message) {
            return new Promise((resolve) => {
                const modal = document.getElementById('confirmModal');
                const messageEl = document.getElementById('confirmMessage');
                messageEl.textContent = message;
                modal.classList.remove('hidden');
                confirmResolve = resolve;
            });
        }

        function handleConfirm(confirmed) {
            const modal = document.getElementById('confirmModal');
            modal.classList.add('hidden');
            if (confirmResolve) {
                confirmResolve(confirmed);
                confirmResolve = null;
            }
        }

        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                document.querySelectorAll('.alert-item').forEach(alert => {
                    alert.remove();
                });
            }, 2000);
        });
    </script>
{% endblock %}
</body>
</html>